<template>
  <div class="ranking-list-container">
    <el-scrollbar>
      <table class="ranking-table">
        <thead>
        <tr style="font-size: 12px">
          <th style="background-color: #f0f8ff;">序号</th>
          <th style="background-color: #f0f8ff;">课题名称</th>
          <th style="background-color: #f0f8ff;">课题编号</th>
          <th style="background-color: #f0f8ff;">实（试）验开始时间</th>
          <th style="background-color: #f0f8ff;">实（试）验结束时间</th>
          <th style="background-color: #f0f8ff;">填报日期</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in rankingList" :key="index">
          <td>{{ index + 1 }}</td>
          <td :data-full-text="item.topicName" :title="item.topicName">{{ item.topicName }}</td>
          <td>{{ item.topicNumber }}</td>
          <td>{{ item.startDate }}</td>
          <td>{{ item.endDate }}</td>
          <td>{{ item.fillDate }}</td>
        </tr>
        </tbody>
      </table>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "RankingList",
  data() {
    return {
      rankingList: [
        { topicName: "L5隧洞衬砌跟进施工技术...", topicNumber: "2024-09-003", startDate: "2024-11-01", endDate: "2024-12-01", fillDate: "2025-01-21" },
        { topicName: "隧道不良地质浅埋段段组...", topicNumber: "2024-09-002", startDate: "2024-09-01", endDate: "2024-12-01", fillDate: "2025-01-21" },
        { topicName: "抽水蓄能电站工程测量关...", topicNumber: "2024-01-013", startDate: "2024-09-01", endDate: "2024-12-26", fillDate: "2025-01-14" },
        { topicName: "复杂地质条件下大型厂房...", topicNumber: "2022-01-010", startDate: "2024-11-01", endDate: "2024-11-30", fillDate: "2025-01-14" },
        { topicName: "富水软弱地层排水管线及...", topicNumber: "2023-01-009", startDate: "2024-10-01", endDate: "2024-10-31", fillDate: "2025-01-14" },
        { topicName: "富水软弱地层排水管线及...", topicNumber: "2023-01-009", startDate: "2024-09-01", endDate: "2024-09-30", fillDate: "2025-01-14" },
        { topicName: "富水软弱地层排水管线及...", topicNumber: "2023-01-009", startDate: "2024-08-01", endDate: "2024-08-31", fillDate: "2025-01-14" },
        { topicName: "智能砂石加工系统与拌合...", topicNumber: "2022-01-028", startDate: "2024-01-01", endDate: "2024-03-31", fillDate: "2025-01-14" },
        { topicName: "富水软弱地层排水管线及...", topicNumber: "2023-01-009", startDate: "2024-06-01", endDate: "2025-06-30", fillDate: "2025-01-13" },
        { topicName: "地下厂房大体积饰面清水...", topicNumber: "2024-01-027", startDate: "2024-10-01", endDate: "2024-12-31", fillDate: "2025-01-13" }
      ],
    };
  },
};
</script>

<style scoped>
.ranking-list-container {
  height: 350px;
  overflow-y: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 使用固定布局 */
}

.ranking-table th,
.ranking-table td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #ebebeb;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 当内容超出容器宽度时显示为省略号 */
  max-width: 0; /* 强制文本溢出 */
  position: relative; /* 使绝对定位的子元素相对于此元素定位 */
}

/* 当鼠标悬停在单元格上时 */
.ranking-table td:hover::after {
  content: attr(data-full-text); /* 显示完整文本 */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: normal; /* 允许换行 */
  width: 200px; /* 提示框宽度 */
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  z-index: 10;
}

/* 设置列宽 */
.ranking-table th:first-child,
.ranking-table td:first-child {
  width: 10%; /* 假设年份占总宽度的10% */
}
.ranking-table th:not(:first-child),
.ranking-table td:not(:first-child) {
  width: 23.5%; /* 其他列宽度适当调整 */
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #dddddd; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #5bc0de; /* 滑块颜色 */
  transition: background-color 0.3s ease-in-out;
}

/* 响应式设计 */
@media screen and (min-width: 2801px) and (max-width: 2900px) {
  .ranking-list-container {
    height: 590px;
  }
}
@media screen and (min-width: 2701px) and (max-width: 2800px) {
  .ranking-list-container {
    height: 575px;
  }
}
</style>
